<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
</div>


<template id="fa">
    <div>
        <h2>父组件向子组件传递数据</h2>
        <h2>{{cmessage}}</h2>
        <h2>{{cmessage1}}</h2>
        <ul>
            <li v-for="(item, index) in cmovies">{{index+'-'+item}}</li>
        </ul>
    </div>
</template>
<script src="../../js/vue.js"></script>

<script>

    const cpn = {
        template: '#fa',
        data() {
            return {
                cmessage1: 'hh'
            }
        },
        // props: ['cmovies','cmessage']
        props: {
            cmovies: Array,
            cmessage: {
                type: String,
                // default: 'aab',
                default(){
                    return 'aab';
                }
            }
        }
    }


    // 根组件（父组件）
    const vue = new Vue({
        el: "#app",
        data: {
            message: "Hello vue,你好！",
            movies: ['火影忍者', '海贼王', '七龙珠']
        },
        components: {
            cpn
        }
    });
</script>
</body>
</html>